<script setup lang="ts">
import { computed, h } from 'vue';
import { App } from 'ant-design-vue';
import {
  useCultivation,
  usePlayerProgress,
  useRealm,
  useSect,
  useUserInfo,
} from '../../../composables';
import { GameKernel, EVENTS } from '../../../game';
import { PlayerProgressReader } from '../../../game/model/player-progress/player-progress-reader';
import VProgress from '../components/progress.vue';
import PageContainer from '../components/page.vue';

const { modal } = App.useApp();

const { state: cultivationState, menuList, changeMenu } = useCultivation();
const { state: realmState } = useRealm();
const { state: playerProgressState } = usePlayerProgress();
const { state: userInfoState } = useUserInfo();
const { state: sectState } = useSect();

const year = computed(() => {
  return PlayerProgressReader.convertTimeAdvanced(
    playerProgressState.value.state.createdAt,
    Date.now()
  );
});

const cultivationProgressValue = computed(() => {
  return Math.min(
    100,
    Math.round(cultivationState.value.cultivationProgress * 100)
  );
});

const saveTag = computed(() => {
  return userInfoState.value.saveTag || [];
});

const currentSectInfo = computed(() => {
  return sectState.value.sectList.find(
    (item) => item.config.id === sectState.value.currentSect
  );
});

const powerDisplayName = computed(() => {
  const currentSectJob = sectState.value.currentSectJob;
  if (!currentSectInfo.value || !currentSectJob) return '散修';
  return `${currentSectInfo.value.config.name} - ${currentSectJob.config.name}`;
});

function onCultivationClick() {
  GameKernel.inst.bus.emit(EVENTS.CULTIVATION_START);
}

function onBreakRealmClick() {
  GameKernel.inst.bus.emit(EVENTS.REALM_BREAKTHROUGH);
}

function onShowSaveTagClick() {
  modal.info({
    title: '印记',
    centered: true,
    okText: '确定',
    content: () => h('pre', userInfoState.value.saveTag.join('\n')),
  });
}
</script>

<template>
  <page-container title="修炼">
    <div class="flex flex-col h-full relative">
      <div class="flex-none p-2 pb-0">
        <div class="h-8 font-bold flex items-center justify-between">
          <div class="flex items-center gap-1">
            <div>{{ userInfoState.username }}</div>
            <div class="font-normal">({{ powerDisplayName }})</div>
          </div>
          <a-button v-show="saveTag.length" @click="onShowSaveTagClick">
            查看印记
          </a-button>
        </div>
        <div class="flex h-8 items-center justify-between">
          <div class="flex items-center gap-2">
            <div>境界:</div>
            <div>{{ realmState.realmInfo?.name }}</div>
            <div>(修炼 {{ year }} 年)</div>
          </div>
          <a-button v-show="realmState.canBreakRealm" @click="onBreakRealmClick"
            >突破</a-button
          >
        </div>
        <div class="flex h-8 items-center gap-2">
          <div>修为:</div>
          <div>
            {{ Math.floor(realmState.currentExp) }} /
            {{ realmState.nextRealmInfo?.requiredExp || '∞' }}
          </div>
        </div>
        <div class="flex h-8 items-center gap-2">
          <div>总修为:</div>
          <div>{{ Math.floor(realmState.totalExp) }}</div>
        </div>
        <div class="h-8 flex items-center">
          <v-progress
            :value="cultivationProgressValue"
            :show-text="true"
          ></v-progress>
        </div>
        <div v-if="!cultivationState.isAutoCultivating">
          <div class="flex justify-center">
            <a-button
              :loading="cultivationState.isCultivating"
              @click="onCultivationClick"
              >修炼</a-button
            >
          </div>
          <div class="text-center pt-2 text-xs">达到 [练气期] 开启自动修炼</div>
        </div>
      </div>
      <div class="flex-1 overflow-auto">
        <div class="grid grid-cols-4 p-2 gap-2">
          <a-button
            v-for="menu in menuList"
            :key="menu.id"
            @click="changeMenu(menu.id)"
          >
            {{ menu.label }}
          </a-button>
        </div>
      </div>
    </div>
  </page-container>
</template>
